<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="utf-8" />

		<title>jquery网格插件 - Bootstrap后台管理系统模版Ace下载</title>



		 

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />



		<!-- basic styles -->



		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />

		<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css">



		<!--[if IE 7]>

		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />

		<![endif]-->



		<!-- page specific plugin styles -->



		<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.full.min.css" />

		<link rel="stylesheet" href="assets/css/datepicker.css" />

		<link rel="stylesheet" href="assets/css/ui.jqgrid.css" />



		<!-- fonts -->



		 



		<!-- ace styles -->



		<link rel="stylesheet" href="assets/css/ace.min.css" />

		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />

		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />



		<!--[if lte IE 8]>

		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />

		<![endif]-->



		<!-- inline styles related to this page -->



		<!-- ace settings handler -->



		<script src="assets/js/ace-extra.min.js"></script>



		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->



		<!--[if lt IE 9]>

		<script src="assets/js/html5shiv.js"></script>

		<script src="assets/js/respond.min.js"></script>

		<![endif]-->

	</head>



	<body>

		<div class="navbar navbar-default" id="navbar">

			<script type="text/javascript">

				try{ace.settings.check('navbar' , 'fixed')}catch(e){}

			</script>



			<div class="navbar-container" id="navbar-container">

				<div class="navbar-header pull-left">

					<a href="#" class="navbar-brand">

						<small>

							<i class="icon-leaf"></i>

							Ace Admin

						</small>

					</a><!-- /.brand -->

				</div><!-- /.navbar-header -->



				<div class="navbar-header pull-right" role="navigation">

					<ul class="nav ace-nav">

						<li class="grey">

							<a data-toggle="dropdown" class="dropdown-toggle" href="#">

								<i class="icon-tasks"></i>

								<span class="badge badge-grey">4</span>

							</a>



							<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">

								<li class="dropdown-header">

									<i class="icon-ok"></i>

									4 Tasks to complete

								</li>



								<li>

									<a href="#">

										<div class="clearfix">

											<span class="pull-left">Software Update</span>

											<span class="pull-right">65%</span>

										</div>



										<div class="progress progress-mini ">

											<div style="width:65%" class="progress-bar "></div>

										</div>

									</a>

								</li>



								<li>

									<a href="#">

										<div class="clearfix">

											<span class="pull-left">Hardware Upgrade</span>

											<span class="pull-right">35%</span>

										</div>



										<div class="progress progress-mini ">

											<div style="width:35%" class="progress-bar progress-bar-danger"></div>

										</div>

									</a>

								</li>



								<li>

									<a href="#">

										<div class="clearfix">

											<span class="pull-left">Unit Testing</span>

											<span class="pull-right">15%</span>

										</div>



										<div class="progress progress-mini ">

											<div style="width:15%" class="progress-bar progress-bar-warning"></div>

										</div>

									</a>

								</li>



								<li>

									<a href="#">

										<div class="clearfix">

											<span class="pull-left">Bug Fixes</span>

											<span class="pull-right">90%</span>

										</div>



										<div class="progress progress-mini progress-striped active">

											<div style="width:90%" class="progress-bar progress-bar-success"></div>

										</div>

									</a>

								</li>



								<li>

									<a href="#">

										See tasks with details

										<i class="icon-arrow-right"></i>

									</a>

								</li>

							</ul>

						</li>



						<li class="purple">

							<a data-toggle="dropdown" class="dropdown-toggle" href="#">

								<i class="icon-bell-alt icon-animated-bell"></i>

								<span class="badge badge-important">8</span>

							</a>



							<ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">

								<li class="dropdown-header">

									<i class="icon-warning-sign"></i>

									8 Notifications

								</li>



								<li>

									<a href="#">

										<div class="clearfix">

											<span class="pull-left">

												<i class="btn btn-xs no-hover btn-pink icon-comment"></i>

												New Comments

											</span>

											<span class="pull-right badge badge-info">+12</span>

										</div>

									</a>

								</li>



								<li>

									<a href="#">

										<i class="btn btn-xs btn-primary icon-user"></i>

										Bob just signed up as an editor ...

									</a>

								</li>



								<li>

									<a href="#">

										<div class="clearfix">

											<span class="pull-left">

												<i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i>

												New Orders

											</span>

											<span class="pull-right badge badge-success">+8</span>

										</div>

									</a>

								</li>



								<li>

									<a href="#">

										<div class="clearfix">

											<span class="pull-left">

												<i class="btn btn-xs no-hover btn-info icon-twitter"></i>

												Followers

											</span>

											<span class="pull-right badge badge-info">+11</span>

										</div>

									</a>

								</li>



								<li>

									<a href="#">

										See all notifications

										<i class="icon-arrow-right"></i>

									</a>

								</li>

							</ul>

						</li>



						<li class="green">

							<a data-toggle="dropdown" class="dropdown-toggle" href="#">

								<i class="icon-envelope icon-animated-vertical"></i>

								<span class="badge badge-success">5</span>

							</a>



							<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">

								<li class="dropdown-header">

									<i class="icon-envelope-alt"></i>

									5 Messages

								</li>



								<li>

									<a href="#">

										<img src="assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />

										<span class="msg-body">

											<span class="msg-title">

												<span class="blue">Alex:</span>

												Ciao sociis natoque penatibus et auctor ...

											</span>



											<span class="msg-time">

												<i class="icon-time"></i>

												<span>a moment ago</span>

											</span>

										</span>

									</a>

								</li>



								<li>

									<a href="#">

										<img src="assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />

										<span class="msg-body">

											<span class="msg-title">

												<span class="blue">Susan:</span>

												Vestibulum id ligula porta felis euismod ...

											</span>



											<span class="msg-time">

												<i class="icon-time"></i>

												<span>20 minutes ago</span>

											</span>

										</span>

									</a>

								</li>



								<li>

									<a href="#">

										<img src="assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />

										<span class="msg-body">

											<span class="msg-title">

												<span class="blue">Bob:</span>

												Nullam quis risus eget urna mollis ornare ...

											</span>



											<span class="msg-time">

												<i class="icon-time"></i>

												<span>3:15 pm</span>

											</span>

										</span>

									</a>

								</li>



								<li>

									<a href="inbox.html">

										See all messages

										<i class="icon-arrow-right"></i>

									</a>

								</li>

							</ul>

						</li>



						<li class="light-blue">

							<a data-toggle="dropdown" href="#" class="dropdown-toggle">

								<img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo" />

								<span class="user-info">

									<small>Welcome,</small>

									Jason

								</span>



								<i class="icon-caret-down"></i>

							</a>



							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">

								<li>

									<a href="#">

										<i class="icon-cog"></i>

										Settings

									</a>

								</li>



								<li>

									<a href="#">

										<i class="icon-user"></i>

										Profile

									</a>

								</li>



								<li class="divider"></li>



								<li>

									<a href="#">

										<i class="icon-off"></i>

										Logout

									</a>

								</li>

							</ul>

						</li>

					</ul><!-- /.ace-nav -->

				</div><!-- /.navbar-header -->

			</div><!-- /.container -->

		</div>



		<div class="main-container" id="main-container">

			<script type="text/javascript">

				try{ace.settings.check('main-container' , 'fixed')}catch(e){}

			</script>



			<div class="main-container-inner">

				<a class="menu-toggler" id="menu-toggler" href="#">

					<span class="menu-text"></span>

				</a>



				<div class="sidebar" id="sidebar">

					<script type="text/javascript">

						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}

					</script>



					<div class="sidebar-shortcuts" id="sidebar-shortcuts">

						<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">

							<button class="btn btn-success">

								<i class="icon-signal"></i>

							</button>



							<button class="btn btn-info">

								<i class="icon-pencil"></i>

							</button>



							<button class="btn btn-warning">

								<i class="icon-group"></i>

							</button>



							<button class="btn btn-danger">

								<i class="icon-cogs"></i>

							</button>

						</div>



						<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">

							<span class="btn btn-success"></span>



							<span class="btn btn-info"></span>



							<span class="btn btn-warning"></span>



							<span class="btn btn-danger"></span>

						</div>

					</div><!-- #sidebar-shortcuts -->



					<ul class="nav nav-list">

						<li class="active">

							<a href="index.html">

								<i class="icon-dashboard"></i>

								<span class="menu-text"> 控制台 </span>

							</a>

						</li>



						<li>

							<a href="typography.html">

								<i class="icon-text-width"></i>

								<span class="menu-text"> 文字排版 </span>

							</a>

						</li>



						<li>

							<a href="#" class="dropdown-toggle">

								<i class="icon-desktop"></i>

								<span class="menu-text"> UI 组件 </span>



								<b class="arrow icon-angle-down"></b>

							</a>



							<ul class="submenu">

								<li>

									<a href="elements.html">

										<i class="icon-double-angle-right"></i>

										组件

									</a>

								</li>



								<li>

									<a href="buttons.html">

										<i class="icon-double-angle-right"></i>

										按钮 &amp; 图表

									</a>

								</li>



								<li>

									<a href="treeview.html">

										<i class="icon-double-angle-right"></i>

										树菜单

									</a>

								</li>



								<li>

									<a href="jquery-ui.html">

										<i class="icon-double-angle-right"></i>

										jQuery UI

									</a>

								</li>



								<li>

									<a href="nestable-list.html">

										<i class="icon-double-angle-right"></i>

										可拖拽列表

									</a>

								</li>



								<li>

									<a href="#" class="dropdown-toggle">

										<i class="icon-double-angle-right"></i>



										三级菜单

										<b class="arrow icon-angle-down"></b>

									</a>



									<ul class="submenu">

										<li>

											<a href="#">

												<i class="icon-leaf"></i>

												第一级

											</a>

										</li>



										<li>

											<a href="#" class="dropdown-toggle">

												<i class="icon-pencil"></i>



												第四级

												<b class="arrow icon-angle-down"></b>

											</a>



											<ul class="submenu">

												<li>

													<a href="#">

														<i class="icon-plus"></i>

														添加产品

													</a>

												</li>



												<li>

													<a href="#">

														<i class="icon-eye-open"></i>

														查看商品

													</a>

												</li>

											</ul>

										</li>

									</ul>

								</li>

							</ul>

						</li>



						<li class="active open">

							<a href="#" class="dropdown-toggle">

								<i class="icon-list"></i>

								<span class="menu-text"> 表格 </span>



								<b class="arrow icon-angle-down"></b>

							</a>



							<ul class="submenu">

								<li>

									<a href="tables.html">

										<i class="icon-double-angle-right"></i>

										简单 &amp; 动态

									</a>

								</li>



								<li class="active">

									<a href="jqgrid.html">

										<i class="icon-double-angle-right"></i>

										jqGrid plugin

									</a>

								</li>

							</ul>

						</li>



						<li>

							<a href="#" class="dropdown-toggle">

								<i class="icon-edit"></i>

								<span class="menu-text"> 表单 </span>



								<b class="arrow icon-angle-down"></b>

							</a>



							<ul class="submenu">

								<li>

									<a href="form-elements.html">

										<i class="icon-double-angle-right"></i>

										表单组件

									</a>

								</li>



								<li>

									<a href="form-wizard.html">

										<i class="icon-double-angle-right"></i>

										向导提示 &amp; 验证

									</a>

								</li>



								<li>

									<a href="wysiwyg.html">

										<i class="icon-double-angle-right"></i>

										编辑器

									</a>

								</li>



								<li>

									<a href="dropzone.html">

										<i class="icon-double-angle-right"></i>

										文件上传

									</a>

								</li>

							</ul>

						</li>



						<li>

							<a href="widgets.html">

								<i class="icon-list-alt"></i>

								<span class="menu-text"> 插件 </span>

							</a>

						</li>



						<li>

							<a href="calendar.html">

								<i class="icon-calendar"></i>



								<span class="menu-text">

									日历

									<span class="badge badge-transparent tooltip-error" title="2&nbsp;Important&nbsp;Events">

										<i class="icon-warning-sign red bigger-130"></i>

									</span>

								</span>

							</a>

						</li>



						<li>

							<a href="gallery.html">

								<i class="icon-picture"></i>

								<span class="menu-text"> 相册 </span>

							</a>

						</li>



						<li>

							<a href="#" class="dropdown-toggle">

								<i class="icon-tag"></i>

								<span class="menu-text"> 更多页面 </span>



								<b class="arrow icon-angle-down"></b>

							</a>



							<ul class="submenu">

								<li>

									<a href="profile.html">

										<i class="icon-double-angle-right"></i>

										用户信息

									</a>

								</li>



								<li>

									<a href="inbox.html">

										<i class="icon-double-angle-right"></i>

										收件箱

									</a>

								</li>



								<li>

									<a href="pricing.html">

										<i class="icon-double-angle-right"></i>

										售价单

									</a>

								</li>



								<li>

									<a href="invoice.html">

										<i class="icon-double-angle-right"></i>

										购物车

									</a>

								</li>



								<li>

									<a href="timeline.html">

										<i class="icon-double-angle-right"></i>

										时间轴

									</a>

								</li>



								<li>

									<a href="login.html">

										<i class="icon-double-angle-right"></i>

										登录 &amp; 注册

									</a>

								</li>

							</ul>

						</li>



						<li>

							<a href="#" class="dropdown-toggle">

								<i class="icon-file-alt"></i>



								<span class="menu-text">

									其他页面

									<span class="badge badge-primary ">5</span>

								</span>



								<b class="arrow icon-angle-down"></b>

							</a>



							<ul class="submenu">

								<li>

									<a href="faq.html">

										<i class="icon-double-angle-right"></i>

										帮助

									</a>

								</li>



								<li>

									<a href="error-404.html">

										<i class="icon-double-angle-right"></i>

										404错误页面

									</a>

								</li>



								<li>

									<a href="error-500.html">

										<i class="icon-double-angle-right"></i>

										500错误页面

									</a>

								</li>



								<li>

									<a href="grid.html">

										<i class="icon-double-angle-right"></i>

										网格

									</a>

								</li>



								<li>

									<a href="blank.html">

										<i class="icon-double-angle-right"></i>

										空白页面

									</a>

								</li>

							</ul>

						</li>

					</ul><!-- /.nav-list -->



					<div class="sidebar-collapse" id="sidebar-collapse">

						<i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>

					</div>



					<script type="text/javascript">

						try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}

					</script>

				</div>



				<div class="main-content">

					<div class="breadcrumbs" id="breadcrumbs">

						<script type="text/javascript">

							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}

						</script>



						<ul class="breadcrumb">

							<li>

								<i class="icon-home home-icon"></i>

								<a href="#">Home</a>

							</li>



							<li>

								<a href="#">Tables</a>

							</li>

							<li class="active">jqGrid plugin</li>

						</ul><!-- .breadcrumb -->



						<div class="nav-search" id="nav-search">

							<form class="form-search">

								<span class="input-icon">

									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />

									<i class="icon-search nav-search-icon"></i>

								</span>

							</form>

						</div><!-- #nav-search -->

					</div>



					<div class="page-content">

						<div class="page-header">

							<h1>

								jqGrid

								<small>

									<i class="icon-double-angle-right"></i>

									Dynamic tables and grids using jqGrid plugin

								</small>

							</h1>

						</div><!-- /.page-header -->



						<div class="row">

							<div class="col-xs-12">

								<!-- PAGE CONTENT BEGINS -->



								<div class="alert alert-info">

									<i class="icon-hand-right"></i>



									Please note that demo server is not configured to save the changes, therefore you may get an error message.

									<button class="close" data-dismiss="alert">

										<i class="icon-remove"></i>

									</button>

								</div>



								<table id="grid-table"></table>



								<div id="grid-pager"></div>



								<script type="text/javascript">

									var $path_base = "/";//this will be used in gritter alerts containing images

								</script>



								<!-- PAGE CONTENT ENDS -->

							</div><!-- /.col -->

						</div><!-- /.row -->

					</div><!-- /.page-content -->

				</div><!-- /.main-content -->



				<div class="ace-settings-container" id="ace-settings-container">

					<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">

						<i class="icon-cog bigger-150"></i>

					</div>



					<div class="ace-settings-box" id="ace-settings-box">

						<div>

							<div class="pull-left">

								<select id="skin-colorpicker" class="hide">

									<option data-skin="default" value="#438EB9">#438EB9</option>

									<option data-skin="skin-1" value="#222A2D">#222A2D</option>

									<option data-skin="skin-2" value="#C6487E">#C6487E</option>

									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>

								</select>

							</div>

							<span>&nbsp; Choose Skin</span>

						</div>



						<div>

							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />

							<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>

						</div>



						<div>

							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />

							<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>

						</div>



						<div>

							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />

							<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>

						</div>



						<div>

							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />

							<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>

						</div>



						<div>

							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />

							<label class="lbl" for="ace-settings-add-container">

								Inside

								<b>.container</b>

							</label>

						</div>

					</div>

				</div><!-- /#ace-settings-container -->

			</div><!-- /.main-container-inner -->



			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">

				<i class="icon-double-angle-up icon-only bigger-110"></i>

			</a>

		</div><!-- /.main-container -->



		<!-- basic scripts -->



		<!--[if !IE]> -->



		<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>



		<!-- <![endif]-->



		<!--[if IE]>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<![endif]-->



		<!--[if !IE]> -->



		<script type="text/javascript">

			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");

		</script>



		<!-- <![endif]-->



		<!--[if IE]>

<script type="text/javascript">

 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");

</script>

<![endif]-->



		<script type="text/javascript">

			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");

		</script>

		<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>

		<script src="assets/js/typeahead-bs2.min.js"></script>



		<!-- page specific plugin scripts -->



		<script src="assets/js/date-time/bootstrap-datepicker.min.js"></script>

		<script src="assets/js/jqGrid/jquery.jqGrid.min.js"></script>

		<script src="assets/js/jqGrid/i18n/grid.locale-en.js"></script>



		<!-- ace scripts -->



		<script src="assets/js/ace-elements.min.js"></script>

		<script src="assets/js/ace.min.js"></script>



		<!-- inline scripts related to this page -->



		<script type="text/javascript">

			var grid_data = 

			[ 

				{id:"1",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},

				{id:"2",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},

				{id:"3",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},

				{id:"4",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},

				{id:"5",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},

				{id:"6",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},

				{id:"7",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},

				{id:"8",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},

				{id:"9",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},

				{id:"10",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},

				{id:"11",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},

				{id:"12",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},

				{id:"13",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},

				{id:"14",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},

				{id:"15",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},

				{id:"16",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},

				{id:"17",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},

				{id:"18",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},

				{id:"19",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},

				{id:"20",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},

				{id:"21",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},

				{id:"22",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},

				{id:"23",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"}

			];	

			

			jQuery(function($) {

				var grid_selector = "#grid-table";

				var pager_selector = "#grid-pager";

			

				jQuery(grid_selector).jqGrid({

					//direction: "rtl",

					

					data: grid_data,

					datatype: "local",

					height: 250,

					colNames:[' ', 'ID','Last Sales','Name', 'Stock', 'Ship via','Notes'],

					colModel:[

						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,

							formatter:'actions', 

							formatoptions:{ 

								keys:true,

								

								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},

								//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}

							}

						},

						{name:'id',index:'id', width:60, sorttype:"int", editable: true},

						{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",unformat: pickDate},

						{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},

						{name:'stock',index:'stock', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},

						{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},

						{name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} 

					], 

			

					viewrecords : true,

					rowNum:10,

					rowList:[10,20,30],

					pager : pager_selector,

					altRows: true,

					//toppager: true,

					

					multiselect: true,

					//multikey: "ctrlKey",

			        multiboxonly: true,

			

					loadComplete : function() {

						var table = this;

						setTimeout(function(){

							styleCheckbox(table);

							

							updateActionIcons(table);

							updatePagerIcons(table);

							enableTooltips(table);

						}, 0);

					},

			

					editurl: $path_base+"/dummy.html",//nothing is saved

					caption: "jqGrid with inline editing",

			

			

					autowidth: true

			

				});

			

				//enable search/filter toolbar

				//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})

			

				//switch element when editing inline

				function aceSwitch( cellvalue, options, cell ) {

					setTimeout(function(){

						$(cell) .find('input[type=checkbox]')

								.wrap('<label class="inline" />')

							.addClass('ace ace-switch ace-switch-5')

							.after('<span class="lbl"></span>');

					}, 0);

				}

				//enable datepicker

				function pickDate( cellvalue, options, cell ) {

					setTimeout(function(){

						$(cell) .find('input[type=text]')

								.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 

					}, 0);

				}

			

			

				//navButtons

				jQuery(grid_selector).jqGrid('navGrid',pager_selector,

					{ 	//navbar options

						edit: true,

						editicon : 'icon-pencil blue',

						add: true,

						addicon : 'icon-plus-sign purple',

						del: true,

						delicon : 'icon-trash red',

						search: true,

						searchicon : 'icon-search orange',

						refresh: true,

						refreshicon : 'icon-refresh green',

						view: true,

						viewicon : 'icon-zoom-in grey',

					},

					{

						//edit record form

						//closeAfterEdit: true,

						recreateForm: true,

						beforeShowForm : function(e) {

							var form = $(e[0]);

							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

							style_edit_form(form);

						}

					},

					{

						//new record form

						closeAfterAdd: true,

						recreateForm: true,

						viewPagerButtons: false,

						beforeShowForm : function(e) {

							var form = $(e[0]);

							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

							style_edit_form(form);

						}

					},

					{

						//delete record form

						recreateForm: true,

						beforeShowForm : function(e) {

							var form = $(e[0]);

							if(form.data('styled')) return false;

							

							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

							style_delete_form(form);

							

							form.data('styled', true);

						},

						onClick : function(e) {

							alert(1);

						}

					},

					{

						//search form

						recreateForm: true,

						afterShowSearch: function(e){

							var form = $(e[0]);

							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')

							style_search_form(form);

						},

						afterRedraw: function(){

							style_search_filters($(this));

						}

						,

						multipleSearch: true,

						/**

						multipleGroup:true,

						showQuery: true

						*/

					},

					{

						//view record form

						recreateForm: true,

						beforeShowForm: function(e){

							var form = $(e[0]);

							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')

						}

					}

				)

			

			

				

				function style_edit_form(form) {

					//enable datepicker on "sdate" field and switches for "stock" field

					form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})

						.end().find('input[name=stock]')

							  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

			

					//update buttons classes

					var buttons = form.next().find('.EditButton .fm-button');

					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon

					buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');

					buttons.eq(1).prepend('<i class="icon-remove"></i>')

					

					buttons = form.next().find('.navButton a');

					buttons.find('.ui-icon').remove();

					buttons.eq(0).append('<i class="icon-chevron-left"></i>');

					buttons.eq(1).append('<i class="icon-chevron-right"></i>');		

				}

			

				function style_delete_form(form) {

					var buttons = form.next().find('.EditButton .fm-button');

					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon

					buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');

					buttons.eq(1).prepend('<i class="icon-remove"></i>')

				}

				

				function style_search_filters(form) {

					form.find('.delete-rule').val('X');

					form.find('.add-rule').addClass('btn btn-xs btn-primary');

					form.find('.add-group').addClass('btn btn-xs btn-success');

					form.find('.delete-group').addClass('btn btn-xs btn-danger');

				}

				function style_search_form(form) {

					var dialog = form.closest('.ui-jqdialog');

					var buttons = dialog.find('.EditTable')

					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');

					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');

					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');

				}

				

				function beforeDeleteCallback(e) {

					var form = $(e[0]);

					if(form.data('styled')) return false;

					

					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

					style_delete_form(form);

					

					form.data('styled', true);

				}

				

				function beforeEditCallback(e) {

					var form = $(e[0]);

					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

					style_edit_form(form);

				}

			

			

			

				//it causes some flicker when reloading or navigating grid

				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this

				//or go back to default browser checkbox styles for the grid

				function styleCheckbox(table) {

				/**

					$(table).find('input:checkbox').addClass('ace')

					.wrap('<label />')

					.after('<span class="lbl align-top" />')

			

			

					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')

					.find('input.cbox[type=checkbox]').addClass('ace')

					.wrap('<label />').after('<span class="lbl align-top" />');

				*/

				}

				

			

				//unlike navButtons icons, action icons in rows seem to be hard-coded

				//you can change them like this in here if you want

				function updateActionIcons(table) {

					/**

					var replacement = 

					{

						'ui-icon-pencil' : 'icon-pencil blue',

						'ui-icon-trash' : 'icon-trash red',

						'ui-icon-disk' : 'icon-ok green',

						'ui-icon-cancel' : 'icon-remove red'

					};

					$(table).find('.ui-pg-div span.ui-icon').each(function(){

						var icon = $(this);

						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);

					})

					*/

				}

				

				//replace icons with FontAwesome icons like above

				function updatePagerIcons(table) {

					var replacement = 

					{

						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',

						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',

						'ui-icon-seek-next' : 'icon-angle-right bigger-140',

						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'

					};

					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){

						var icon = $(this);

						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

						

						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);

					})

				}

			

				function enableTooltips(table) {

					$('.navtable .ui-pg-button').tooltip({container:'body'});

					$(table).find('.ui-pg-div').tooltip({container:'body'});

				}

			

				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

			

			

			});

		</script>

	

</body>

</html>

